<style lang="less">
    .anchor{
        & a{
            opacity: 0;
            font-size: 24px;
            transition: opacity .2s ease-in-out;
            margin-left: 5px;
            position: relative;
            top: 2px;
        }
        &:hover a{
            opacity: 1;
        }
    }
    .anchor h1,.anchor h2,.anchor h3,.anchor h4,.anchor h5,.anchor h6 {
        display: inline-block
    }
    .anchor h2 {
        margin: 12px 0;
        font-size: 20px;
        font-weight: 400;
    }
    .anchor h3 {
        margin: 8px 0;
        font-size: 16px;
        font-weight: 400;
    }
</style>
<template>
    <div class="anchor">
        <h1 v-if="h1" :id="title_link">{{ title }}</h1>
        <h2 v-if="h2" :id="title_link">{{ title }}</h2>
        <h3 v-if="h3" :id="title_link">{{ title }}</h3>
        <h4 v-if="h4" :id="title_link">{{ title }}</h4>
        <h5 v-if="h5" :id="title_link">{{ title }}</h5>
        <h6 v-if="h6" :id="title_link">{{ title }}</h6>
        <slot></slot>
        <a :href="`#${title_link}`">#</a>
    </div>
</template>
<script>
	export default {
		props: {
			title: String,
			h1: Boolean,
			h2: Boolean,
			h3: Boolean,
			h4: Boolean,
			h5: Boolean,
			h6: Boolean
		},
		computed: {
			title_link () {
				return this.title.replace(/\s/g, '_');
			}
		}
	}
</script>
